<template>
	<view class="content">
		<view class="zonghegedan">
			<view class="zonghegedantitle">
				视频
			</view>
			<view class="zhonghe-mv" v-for="(item,index) in mv" :key="item.vid">

				<view class="mv-img">
					<image :src="item.coverUrl"></image>
				</view>
				<view class="mv-msg">
					<text>{{item.title}}</text>
					<view style="font-size:15upx;color: #6D6D6D;">
						<text>{{item.durationms | formatStr2}},by{{item.creator[0].userName}},播放{{item.playTime | count}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {

			}
		},
		props: ['mv'],
		filters: {
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万次' : v + '次'
			},
			formatStr2(v) {
				return moment(v).format('mm:ss')
			}
		},

	}
</script>


<style scoped lang="scss">
	.content {
		margin-top: 30upx;
	}

	.zonghegedantitle {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #fff;
		padding: 30upx;
		font-weight: 600;
		font-size: 17px;
	}

	.zhonghe-mv {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 30upx;

		.mv-img {
			position: relative;

			image {
				border: 1px solid rgb(245, 245, 245);
				width: 200upx;
				height: 140upx;
				border-radius: 10px;
			}
		}

		.mv-msg {
			margin-left: 10px;

			text {}
		}
	}
</style>
